<script setup lang="ts">
const bp = useAppBreakpoints();
const inviteRewardsHistoryQry = useQuery({
  queryKey: [apis.apiInviteRewardsHistory.id],
  queryFn: () => apis.apiInviteRewardsHistory({}),
});
const inviteRewards = computed(() => inviteRewardsHistoryQry.data.value?.list);
const inviteRewardsList = computed(() => bp.ltTablet ? inviteRewards.value?.slice(0, 2) : inviteRewards.value?.slice(0, 4));

const rewardType = reactive<Record<number, Ref<string>>>({
  4: toRef(() => $t('z8E4ejnK0EmiXvDg4BpR0')),
  13: toRef(() => $t('rdt2qztw39rxNJbhu3j4H')),
  30: toRef(() => $t('Ut5xpCDX86xYHSh7PpRj')),
});
</script>

<template>
  <TCard :title="$t('q9KBkuPi7uJcWiqucsK9o')">
    <TSuspenseView
      v-bind="buildSvPropsOfQuery(inviteRewardsHistoryQry, { isEmptyFn: data => !data?.list?.length })"
      class="h-full flex flex-col"
    >
      <div
        v-for="item of inviteRewardsList" :key="item.log_id"
        class="grid grid-cols-[1fr_auto] gap-2 b-b-(1 sys-layer-d solid) py-3 text-sm text-sys-text-body"
      >
        <div class="col-span-full">
          <i class="i-local:reward" /> {{ rewardType?.[item.type] }}
        </div>
        <div class="flex">
          <TAmount class="text-sys-text-head" :value="item.amount" symbol="$" iconPos="left" :decimals="6" format="pad-dec" />
          &nbsp;≈&nbsp;
          <TAmount class="text-sys-text-head" :value="item.rewards_detail.amount" :symbol="item.rewards_detail.currency" :decimals="6" format="pad-dec" iconPos="left" />
        </div>
        <div>{{ $d(item.create_time) }}</div>
      </div>
      <div class="h-4" />
      <AButton class="ant-cover__Button-3d-gray mt-auto" type="primary" block @click="globalPopups.bonusRecord.open()">
        {{ $t('pjHHxQw5oQ6y1Olu3eCi') }}
      </AButton>
    </TSuspenseView>
  </TCard>
</template>
